<html>
<head>
<title>{{title}}</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="css/jplus-styles.css" />

<link rel="stylesheet"  href="css/jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script src="http://platform.twitter.com/anywhere.js?id=j7VcMB4Kzdke8FEzdPpTkw&v=1" type="text/javascript"></script>
<script src="js/persistence.js"></script>
<script src="js/persistence.store.sql.js"></script>
<script src="js/persistence.store.websql.js"></script>
<script src="js/persistence.store.memory.js"></script>
<script src="js/modernizr-1.7.min.js"></script>
<script src="js/json2.js"></script>
<script src="js/jquery.mobile-1.0a4.1.min.js"></script>
<script src="js/jQuery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker.mobile.js"></script>
<style>
  .errorField {
    background-color: #FFC;
    border-color: #C00;
  }
  input { margin:4px; }

</style>
<script type="text/javascript">
    var geocoder;
    var cityName;

    $(document).ready(function(){
        geocoder = new google.maps.Geocoder();
    })

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
    }

    //Get latitude and longitude;
    function successFunction(position) {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        codeLatLng(lat, lng)
    }

    function errorFunction(error) {
        alert("Error");
    }

    function codeLatLng(lat, lng) {

        var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng' : latlng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                console.log(results)
                if(results[0]){
                 var city;
                 var state;
                 //find country name
                 for ( var i = 0; i < results[0].address_components.length; i++) {
                     for ( var b = 0; b < results[0].address_components[i].types.length; b++) {
                         //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                         if (results[0].address_components[i].types[b] == "locality") {
                             //this is the object you are looking for
                             city = results[0].address_components[i].short_name;
                             continue;
                         }
                         if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                             state = results[0].address_components[i].short_name;
                             continue;
                         }
                         if (city != null && state !=null) {
                             break;
                         }
                     }
                 }
                 cityNameCallback(city + ", " + state);

                    var city;
                    var state;
                    //find country name
                    for ( var i = 0; i < results[0].address_components.length; i++) {
                        for ( var b = 0; b < results[0].address_components[i].types.length; b++) {
                            //there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
                            if (results[0].address_components[i].types[b] == "locality") {
                                //this is the object you are looking for
                                city = results[0].address_components[i].short_name;
                                continue;
                            }
                            if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
                                state = results[0].address_components[i].short_name;
                                continue;
                            }
                            if (city != null && state !=null) {
                                break;
                            }
                        }
                    }
                    cityNameCallback(city + ", " + state);

                } else {
                    console.log("No results found");
                }
            } else {
                console.log("Geocoder failed due to: " + status);
            }
        });
    }

    function cityNameCallback(cityName) {
        document.getElementById("city").value = cityName;
    }

    function sendRequest() {
        postData = {
            action : 'Add',
            user : $('#user').val(),
            story : $('#story').val(),
            city : $('#city').val()
        };

        $.getJSON("/rpc", postData, function(rsp) {
            console.log(rsp)

            $('#result').val(rsp.output);

        })
    }

    $('#submitButton').live('click', function() {
        sendRequest();
        return false;
    })
</script>
</head>

<body>
    <!--- PAGE: Welcome -->
    <div id="welcome" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>JCard +</h1>
      </div>

      <div data-role="content">
        <div class="balanceNotice">
          <span class="label">Balance: </span>
          <span id="balanceAmt" class="balanceAmount">$10.00</span>
        </div>

        <a href="#buy" data-role="button" data-theme="e">Use Card</a>
        <a href="#shareYourStory" data-role="button">Share your <br/> coffee donation story</a>

        <br>
        <ul data-role="listview" data-theme="c" data-inset="true">
          <li><a href="#lastBought">Recent Coffee Bought: <br/><span id="lastcoffeebought">San Francisco, CA</span></a><span class="ui-li-count">5</span></li>
          <li><a href="#lastDonated">Recent Coffee Donated From: <br/><span id="lastcoffeedonated">San Francisco, CA</span></a><span class="ui-li-count">5</span></li>
        </ul>
      </div>
    </div>

    <!--- PAGE: Use Card -->
    <div id="buy" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>Use Card</h1>
      </div>

      <div data-role="content">
        <div class="starbucksCard">
          <span id="balanceAmount">$10.00</span>
        </div>

        <a href="#usedCard" data-role="button" data-theme="e">Done using card</a>
        <a href="#noMoney" data-role="button" data-theme="a">No money on card</a>
      </div>
    </div>

    <!--- PAGE: Done Using Card -->
    <div id="usedCard" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>Awesome!</h1>
      </div>

      <div data-role="content">
        <h1>You just got Coffee!!!</h1>

        <form>
            <label for="twitterHandle">Your Twitter Handle:</label>
            <input type="text" id="twitterHandle" />
            <p>Your Location: <input type="text" id="city" /></p>
            <label for="thankYouMsg">Story:</label>
            <div id="thankYouMsg"></div>
            <script type="text/javascript">

              twttr.anywhere(function (T) {
                T("#thankYouMsg").tweetBox({  
                    height: 100,
                    width: 300,
                    label: '',
                    defaultContent: "#jcard+"
                      });

              });

            </script>
          <a href="#welcome">Don't thank anyone</a>

        </form>
      </div>
    </div>

    <!--- PAGE: No Money on Card -->
    <div id="noMoney" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>Aww...</h1>
      </div>

      <div data-role="content">
        <h2>There's no money on the card!</h2>

        <p>There are a couple things you could do at this point:</p>
        <ol>
          <li>Reload this card at any Starbucks register.</li>
          <li>Sign in to Starbucks.com, and then reload it that way.</li>
        </ol>

        <a href="http://www.starbucks.com/" data-role="button" data-theme="e">Visit Starbucks.com</a>
        <a href="#welcome" data-role="button" data-theme="e">Back to Home</a>

      </div>
    </div>

    <!--- PAGE: Share your story -->
    <div id="shareYourStory" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>Share Your Story</h1>
      </div>

      <div data-role="content">
        <form>
          <label for="thankYouMsg">Why did you buy someone coffee?</label>
          <textarea id="thankYouMsg">Make someone's day</textarea>

          <label for="moneyDonated">How much did you contribute?</label>
          <input type="text" id="moneyDonated" value="$15.00" />

          <label for="twitterHandle">Your Twitter Handle:</label>
          <input type="text" id="twitterHandle" value="@crystielopez" />

          <p>Your Location: <b>Mountain View, CA</b></p>

          <input type="submit" value="Tweet Story" />
        </form>
      </div>
    </div>

    <!--- PAGE: Last Bought -->
    <div id="lastBought" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>Recent Coffee Activity</h1>
      </div>
      <ul data-role="listview" data-theme="b" data-inset="true">
        <li>San Francisco, CA <span class="timestamp">Today, 1:52pm</span></li>
        <li>San Jose, CA <span class="timestamp">Today, 1:42pm</span></li>
        <li>Phoenix, AZ <span class="timestamp">Today, 11:12am</span></li>
        <li>Dallas, TX <span class="timestamp">Yesterday, 1:01pm</span></li>
        <li>Portland, OR <span class="timestamp">Aug 9, 2011, 3:37pm</span></li>
      </ul>
    </div>

    <!--- PAGE: Last Bought -->
    <div id="lastDonated" data-role="page" data-theme="a">
      <div data-role="header">
        <h1>Recent Coffee Donations</h1>
      </div>
      <ul data-role="listview" data-theme="b" data-inset="true">
        <li>San Francisco, CA <span class="timestamp">Today, 1:52pm</span></li>
        <li>San Jose, CA <span class="timestamp">Today, 1:42pm</span></li>
        <li>Phoenix, AZ <span class="timestamp">Today, 11:12am</span></li>
        <li>Dallas, TX <span class="timestamp">Yesterday, 1:01pm</span></li>
        <li>Portland, OR <span class="timestamp">Aug 9, 2011, 3:37pm</span></li>
      </ul>
    </div>
</body>
</html>